<!--
 * @Title: ****
 * @Date: 2020-10-16 15:57:47
 * @FilePath: /vue-admin-template/src/views/product/index.vue
-->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input  placeholder="Title" size="small" style="width: 200px;" class="filter-item" />
      <el-input  placeholder="Title" size="small" style="width: 200px;" class="filter-item margin-left-10" />
      <el-button  class="filter-item margin-left-10" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAdd">
       新增
      </el-button>
    </div>
    <el-table
      class="margin-top-20"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      align="center"
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ ++scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="图片"  align="center" width="180">
         <template slot-scope="scope">
          <img :src="scope.row.img" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称"  width="110">
        <template slot-scope="scope">
          {{ scope.row.pdName }}
        </template>
      </el-table-column>
      <el-table-column label="种类" align="center">
        <template slot-scope="scope">
          <span>{{  typeName[scope.row.type] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进价" align="center">
        <template slot-scope="scope">
          {{ scope.row.originPrice }}
        </template>
      </el-table-column>
      <el-table-column label="售价"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.outPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进口量"  align="center" prop="enterVolume">
      </el-table-column>
      <el-table-column label="出口量"  align="center" prop="outVolume">
      </el-table-column>
      <el-table-column label="描述"  align="center" prop="desc">
      </el-table-column>
      <el-table-column align="center"  label="操作"  width="200" >
      <template slot-scope="scope">
          <el-button v-if="scope" size="small" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
            编辑
          </el-button>
          <el-button  class="filter-item" type="primary" size="small" icon="el-icon-search" @click="handleFilter">
          下架
          </el-button>
      </template>
    </el-table-column>
    </el-table>
    
    <addModel v-if="dialogVisible" @refresh="getList" v-model= "dialogVisible"></addModel>
    <page :total="param.total" :currentPage="param.page" :pageSize= "param.limit" @OnChange="onChange"></page>
  </div>
</template>

<script>
import ProductServices from '@/services/modules/product'
import addModel from './components/addModel'
import page from '@/components/pagination'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components:{
    addModel,
    page
  },
  data() {
    return {
      list: [],
      typeName:{
        1:'晨采果蔬',
        2:'菌菇大全'
      },
      param:{
        page: 1,
        limit: 2,
        total: 1,
      },
      dialogVisible:false,
      listLoading: true
    }
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.listLoading = true;
      setTimeout(()=>{
        this.listLoading = false;
      },2000)
      const param = {
        page: this.param.page,
        limit: this.param.limit
      }
      const result = await ProductServices.GETLIST(param)
      if(result.code === 200){
        this.list = result.data.data;
        this.param.total = result.data.total;
      }
      this.listLoading = false;
    },
    onChange(val) {
      this.param.page = val;
      this.getList();
    },
    handleAdd() {
      this.dialogVisible = true;
    },
    handleFilter(){
      
    }
  }
}
</script>
